<template>
  <details
    ref="el"
    class="dropdown dropdown-end"
    :open="open"
    @toggle="onToggle"
  >
    <summary class="m-1 list-none">
      <slot />
    </summary>
    <div class="dropdown-content z-50">
      <slot name="dropdown"></slot>
    </div>
  </details>
</template>
<script setup lang="ts">
import { onClickOutside } from "@vueuse/core";
const open = ref(false);

const onToggle = (event: Event) => {
  open.value = (event.target as HTMLDetailsElement).open;
};
const el = ref();
onClickOutside(el, () => (open.value = false));
</script>
